<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <!-- 必须的 meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>回收站</title>

    <script>
        window.onload = function () {
            document.getElementById("delSelected").onclick = function () {
                var cbs = document.getElementsByName("rid");
                var flag = false; //判断当有按钮被选中后才提交表单id,否则报空指针异常
                for (var i = 0; i < cbs.length; i++) {
                    if (cbs[i].checked) {
                        flag = true;
                        break;
                    }
                }
                if (flag) {
                    if (confirm("您确定要删除吗?")) {
                        //提交表单要删除的信息所对应的id
                        document.getElementById("form_summit").submit();
                    }
                } else {
                    alert("您没有选中任何要删除的信息！")
                }
            }

            document.getElementById("firstCb").onclick = function () {
                //遍历下面所有的按钮和标题行中的按钮状态一致
                var cbs = document.getElementsByName("rid");
                for (var i = 0; i < cbs.length; i++) {
                    //设置这些cbs[i]的checked的状态和firstCb的checked一致
                    cbs[i].checked = this.checked;
                }
            }
        }

        //只有点击弹出来的确定删除按钮之后删除,增加用户体验感
        function deleteUser(rid) {
            if (confirm("您确定要删除吗?")) {
                location.href = "${pageContext.request.contextPath}/user/deleteArticleFromRecycle?rid=" + rid;
            }
        }
    </script>
</head>
<body>

<div class="container">
    <h3 style="text-align: center">回收站</h3>
    <div style="float: right; margin: 5px;">
        <a class="btn btn-primary" href="${pageContext.request.contextPath}/person.html">返回</a>
        <a class="btn btn-primary" href="javascript:void(0)" id="delSelected">删除选中</a>
    </div>
    <form id="form_summit" action="${pageContext.request.contextPath}/user/deleteSelectedArticleFromRecycle" method="post">
        <table border="1" class="table table-bordered table-hover">
            <tr class="success" style="background-color: #DFF0D8;text-align: center">
                <th><input type="checkbox" id="firstCb"></th>
                <th>ID</th>
                <th>标题</th>
                <th>发布时间</th>
                <th>修改时间</th>
                <th>浏览量</th>
                <th>点赞</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${pb.list}" var="article" varStatus="s">
                <tr style="text-align: center">
                    <th><input type="checkbox" name="rid" value="${article.rid}"></th>
                    <td>${s.count}</td>
                    <td>${article.title}</td>
                    <td>${article.createTime}</td>
                    <td>${article.modifyTime}</td>
                    <td>${article.browserNum}</td>
                    <td>${article.favour}</td>
                    <td>
                        <a class="btn btn-default btn-sm"
                           href="${pageContext.request.contextPath}/user/recoverArticle?rid=${article.rid}">恢复</a>
                        <a class="btn btn-default btn-sm" href="javascript:deleteUser(${article.rid})">删除</a>
                    </td>
                </tr>
            </c:forEach>

        </table>
    </form>

    <div>
        <nav>
            <ul class="pagination">

                <div>
    <span style="font-size: 25px; margin-left: 20px;">
        共<span style="color: blue;">${pb.totalCount}</span>条记录，共<span style="color: blue;">${pb.totalPage}</span>页
    </span>
                </div>

                <br>

                <li class="page-item">
                    <a class="page-link"
                       href="${pageContext.request.contextPath}/user/findArticleFromRecycle?currentPage=${pb.currentPage - 1}&rows=10"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <ul class="pagination">
                    <c:set var="previousPages" value="${pb.currentPage - 5}" />
                    <c:set var="nextPages" value="${pb.currentPage + 4}" />

                    <c:if test="${previousPages < 1}">
                        <c:set var="previousPages" value="1" />
                    </c:if>

                    <c:if test="${pb.totalPage < nextPages}">
                        <c:set var="nextPages" value="${pb.totalPage}" />
                    </c:if>
                    <c:forEach begin="${previousPages}" end="${nextPages}" var="i">
                        <c:if test="${pb.currentPage == i}">
                            <li class="page-item active">
                                <a class="page-link"
                                   href="${pageContext.request.contextPath}/user/findArticleFromRecycle?currentPage=${i}&rows=10">${i}</a>
                            </li>
                        </c:if>
                        <c:if test="${pb.currentPage != i}">
                            <li class="page-item">
                                <a class="page-link"
                                   href="${pageContext.request.contextPath}/user/findArticleFromRecycle?currentPage=${i}&rows=10">${i}</a>
                            </li>
                        </c:if>
                    </c:forEach>

                    <li class="page-item">
                        <a class="page-link"
                           href="${pageContext.request.contextPath}/user/findArticleFromRecycle?currentPage=${pb.currentPage + 1}&rows=5"
                           aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>